<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<div style="height:2000px"></div>

<div id=shadowhost>
  <template shadowroot=open>
    <details id=detailselement>
      <summary>summary</summary>
      details
    </details>
  </template>
</div>

<script>
async_test(t => {
  const detailselement = shadowhost.shadowRoot.getElementById('detailselement');
  assert_false(detailselement.open, `details should be closed at the start of the test.`);
  assert_equals(window.pageYOffset, 0, `page should be scrolled to the top at the start of the test.`);

  detailselement.addEventListener('toggle', t.step_func_done(() => {
    assert_true(detailselement.open, `find-in-page should open the details element.`);
    assert_not_equals(window.pageYOffset, 0, `find-in-page should scroll to the details element.`);
  }));

  testRunner.findString('details', ['Async']);
}, `Verifies that find-in-page expands details elements in shadow dom when the target text is inside of them.`);
</script>
